<template>
  <view class="">
    <view
      class="c-foot"
      :class="[ggclass, { 'box-shadow': isBoxShadows }]"
      :style="[styles]"
    >
      <slot></slot>
    </view>
    <view class="foot-box" :style="{ height }"> </view>
  </view>
</template>

<script lang="ts" setup>
import {
  ref,
  computed,
  defineProps,
  reactive,
  onMounted,
  getCurrentInstance,
  toRefs,
} from "vue";
const { proxy } = getCurrentInstance() as any;
import propsMixin from "../mixins/props/index";
const props = defineProps({
  ...propsMixin.props,
  padding: {
    type: String,
    default: "",
  },
  isBoxShadow: {
    type: [String, Boolean],
    default: "",
  },
  background: {
    type: String,
    default: "",
  },
  jc: {
    type: String,
    default: "",
  },
  row: {
    type: Boolean,
    default: false,
  },
  extendHieght: {
    type: String,
    default: "20rpx",
  },
  slotData: {
    type: [String, Object],
    default: () => {
      return {};
    },
  },
});
const state = reactive({
  info: {
    safeAreaInsets: {},
  },
  paddingBottomHeight: "",
  height: "",
});
const {height} = toRefs(state)
onMounted(async () => {
  state.info = uni.getSystemInfoSync() as any;
  let res = await proxy.$getNode(".c-foot", proxy);
  state.height = res.height * 2 + parseInt(props.extendHieght) + "rpx";
});

const extendHieghts = computed(() => {
  return props.extendHieght === "20rpx"
    ? (proxy.$footStyle || {}).extendHieght || props.extendHieght
    : props.extendHieght;
});
const paddingBottoms = computed({
  get() {
    if (state.paddingBottomHeight)
      return `${
        state.paddingBottomHeight + parseInt(extendHieghts.value) + 20
      }rpx`;
    //@ts-ignore
    if (state.info.safeAreaInsets.bottom) {
      //@ts-ignore
      return `${state.info.safeAreaInsets.bottom}rpx`;
    }
    return `${parseInt(extendHieghts.value)}rpx`;
  },
  set(val) {
    state.paddingBottomHeight = val;
  },
});
const paddings = computed(() => {
  return props.padding || (proxy.$footStyle || {}).padding;
});
const jcs = computed(() => {
  return props.jc || (proxy.$footStyle || {}).jc;
});
const computedFootBackgroung = computed(() => {
  if (props.isOpenPattern) {
    return proxy.$color.theme.footBgColor;
  }
  return props.background || proxy.$footStyle.background || "#fff";
});
const isBoxShadows = computed(() => {
  if (props.isBoxShadow !== "") return props.isBoxShadow;
  return proxy.$footStyle.isBoxShadow;
});
const styles = computed(() => {
  let params:any = {
    background: computedFootBackgroung.value,
    padding: paddings.value,
    justifyContent: jcs.value,
    paddingBottom: paddingBottoms.value,
	// @ts-ignore
    color: props.computedColor,
  };
  if (props.row) {
    params.display = "flex";
  }
  return params;
});
</script>

<style lang="scss" scoped>
.c-foot {
  overflow: hidden;
  // height: 80rpx;
  width: 100%;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  z-index: 99;
  // box-sizing: content-box;
  // padding-top: 20rpx;
  // padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.box-shadow {
  box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 15, 65, 0.1);
}
</style>